<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台人员管理列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/jurisdiction/department-management-list.css"/>
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script src="/ztree/js/jquery.ztree.all.min.js"></script>
    <style>
        .tabHea{
            margin-top: 47px;
            margin-left: 21.33333333%;
        }
        .layui-col-md9{
            width: 94.3444%;
            background-color: #F1F1F1;
        }
        .layui-form{
            margin: 1px;
        }
        .tabLeft{
            width:74.3444%;
            float: right;
            margin-right: 4.44%;
        }
        .layui-table-cell{
            height: inherit;
            line-height: 20px;
        }
        .btnRight{
            float: right;
            margin-top: 14px;
            margin-right: 10px;
        }
        .ztreeLeft{
            float: left;
            margin-left: 4.5%;
            margin-top: -4%;
        }
        #treeDemo{

        }
    </style>
</head>
<body>
    <div class="layui-row deptHea dept-top back ">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md11">
            <p class="left">后台人员管理列表</p>
            <div class="right">
                <button class="layui-btn layui-btn-sm" id="Refresh">
                    <i class="layui-icon">&#xe9aa;</i>刷新
                </button>
                <button class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe65c;</i>返回
                </button>
            </div>
        </div>
    </div>
    <div class="layui-row scrBack deptHea">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md11">
            <div class="screen">
                <i class="layui-icon">&#xe615;</i>筛选查询
                <button class="layui-btn btnRight" id="highRetrieval">
                    <i class="layui-icon">&#xe6b2;</i>高级检索
                </button>
            </div>
        </div>
    </div>

    <div class="layui-row  deptHea">
        <div class="layui-col-md11">
            <div class="layui-panel search">
                <form class="layui-form" action="">
                    <ul>
                        <li>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户账号：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="account"  placeholder="请输入用户账号" autocomplete="off"  class="layui-input">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户姓名：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="trueName"  placeholder="请输入用户姓名" autocomplete="off"  class="layui-input">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="layui-form-item">
                                <label class="layui-form-label">所属部门：</label>
                                <div class="layui-input-block">
                                    <input type="text" id="" name="deptName"  placeholder="请输入所属部门" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="layui-form-item">
                                <label class="layui-form-label">注册时间：</label>
                                <div class="layui-input-block">
                                    <input type="text" id="registerDate" name="createDate"  placeholder="请输入注册时间" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="layui-form-item screenBtn">
                                <a href="javascript:getDept();"  class="layui-btn">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </a>
                                <a href="javascript:resetBox();" class="layui-btn layui-btn-danger">
                                    <i class="layui-icon">&#xe669;</i>重置
                                </a>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-row tabHea">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md9">
            <div class="screen left">
                <i class="layui-icon">&#xe60a;</i>后台管理员数据列表
            </div>
            <div class="right">
                <a class="layui-btn" href="javascript:addUser();">
                    <i class="layui-icon">&#xe624;</i>添加管理员
                </a>
                <a class="layui-btn" href="javascript:;">
                    <i class="layui-icon">&#xe62f;</i>导入管理员
                </a>
            </div>
        </div>
    </div>
    <div class="layui-row ">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md2 ztreeLeft">
            <ul id="treeDemo" class="ztree "></ul>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md9 tabLeft" >
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</body>
    <script>
        var $;
        var element;
        var form;
        var table;
        var laydate;
        var status;
        var layer;
        layui.use(['jquery','element','form','table','laydate','layer'],function () {
            $ = layui.$;
            element = layui.element;
            form = layui.form;
            table = layui.table;
            laydate = layui.laydate;
            layer = layui.layer;

            laydate.render({
                elem: '#createDate', //指定元素
                type: 'datetime'
            });

            form.on('switch(enable)', function(data){
                var id = data.value;
                var enabled;
                if(data.elem.checked){
                    enabled = 1;
                }else{
                    enabled = 2;
                }
                $.ajax({
                    url:'/Department/updateEnable',
                    data:{'id':id,'enabled':enabled},
                    dataType:'json',
                    success:function(data){
                        if(data.data){
                            if(enabled === 1){
                                layer.msg("该账号已启用");
                            }else{
                                layer.msg("该账号已停用");
                            }
                        }
                    }
                });
            });

            /*form.on('switch(state)', function(data){
                if(data.elem.checked){
                    console.log(data.value);
                }else{

                }
            });*/

            startTab();
            function startTab() {
                $.ajax({
                    url:'/Department/getJsUser',
                    dataType:'json',
                    success:function (data) {
                        data = data.data;
                        initTab(data);
                    }
                });
            }




            $.ajax({
                url:'/Department/personnelDepartment',
                dataType:'json',
                success:function (data) {
                    data = data.data;
                    console.log(data);
                    zTree(data);
                }
            });

            function zTree(data){

                var settingss = {
                    view:{
                        showIcon:true,
                        selectedMulti:false,
                    },
                    showLine: true,
                    root: {
                        isRoot: true,
                        nodes: []
                    },
                    data: {
                        simpleData: {
                            enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                            idKey: "id",  //节点数据中保存唯一标识的属性名称
                            pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称
                            rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                        },
                        key: {
                            name: "deptName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                        }
                    },
                    check:{
                        enable:false,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                        chkboxType: { "Y": "p", "N": "s" },
                        nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
                    },
                    callback : { //回调函数
                        beforeCheck : function(treeId, treeNode) {
                            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                            zTree.checkAllNodes(false);
                            return true;
                        },
                        /*onRightClick : OnRightClick,   //右键事件
                        onClick : chooseNode*/
                    }
                };

                var newCount = 1;
                zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, data );
                zTreeObj.expandAll(true);
            }

            $('#highRetrieval').click(function () {
                layer.open({
                    type:2,
                    content:'/jurisdiction/advanced-retrieval.html',
                    area: ['700px', '400px'],
                    end:function () {
                        startTab();
                    }
                });
            });

            getDept = function getDept() {
                var data = {
                    account:$('input[name = account]').val(),
                    trueName:$('input[name = trueName]').val(),
                    deptName:$('input[name = deptName]').val(),
                    registerDate:$('input[name = registerDate]').val()
                }
                $.ajax({
                    url:'/Department/getJsUser',
                    dataType:'json',
                    data:data,
                    success:function (dat) {
                        data = dat.data;
                        initTab(data);
                    }
                });
            }
            resetBox = function resetBox() {
                location.reload();
            }

            $('#Refresh').click(function () {
                location.reload();
            });

            var id;
            var account;
            viewPeople = function viewPeople(userId){
                id = userId;
                layer.open({
                    type:2,
                    content:'/jurisdiction/view-background-personnel.html',
                    area: ['75%', '48%'],
                });
            }

            getParentId = function getParentId() {
                return id;
            }

            jurisdiction = function jurisdiction(userId,name) {
                account = name;
                id = userId;
                layer.open({
                    type:2,
                    content:'/jurisdiction/personnel-authority.html',
                    area: ['40%', '48%'],
                });
            }

            addUser = function addUser(){
                window.location = '/jurisdiction/add-background-personnel.html';
            }

            edit = function edit(userId) {
                id = userId;
                layer.open({
                    type:2,
                    content:'/jurisdiction/user-editing.html',
                    area: ['75%', '50%'],
                    end:function () {
                        startTab();
                    }
                });
            }

            shutDown = function shutDown(id,account) {
                layer.open({
                    type:2,
                    content:'/jurisdiction/shut-down.html',
                    area:['600px','400px'],
                    success:function (layero, index) {
                        var div = layero.find('iframe').contents().find('form');
                        div.find("input[name = id]").val(id);
                        div.find("input[name = account]").val(account);
                    },
                    end:function () {
                        startTab();
                    }
                })
            }

        });
        function initTab(data) {
            table.render({
                elem: '#demo',
                data:data,
                page: true,
                toolbar:true,
                limit:5,
                cols: [[
                    {type:'checkbox',width:'5%'},
                    {title: '序号', type:'numbers',width:'5%'},
                    {field: 'trueName', title: '用户姓名',width:'10%',align:'center'},
                    { title: '用户头像',width:'15%',align:'center',templet:function (d){
                            return "<img src='"+d.acatarUrl+"' width='70' height='70'/>";
                        }},
                    {field: 'sex', title: '性别',width:'5%',align:'center'},
                    {field: 'account', title: '用户账号',width:'10%',align:'center'},
                    {field: 'deptName', title: '所属部门',width:'10%',align:'center'},
                    {title: '是否启用',width:'10%',align:'center',templet:function (d) {
                            if(d.enabled == 1){
                                return"<input type='checkbox' value='"+d.userId+"' lay-filter='enable' lay-skin='switch' lay-text='启用|停用' checked>";
                            }else{
                                return"<input type='checkbox' value='"+d.userId+"' lay-filter='enable' lay-skin='switch' lay-text='启用|停用'>";
                            }
                        }},
                    {title: '账号状态',width:'10%',align:'center',templet:function (d) {
                            if(d.status == 1){
                                return"<input type='checkbox' value='"+d.userId+"' lay-filter='state' disabled='disabled' lay-skin='switch' lay-text='使用中|已冻结' checked>";
                            }else{
                                return"<input type='checkbox' value='"+d.userId+"' lay-filter='state' disabled='disabled' lay-skin='switch' lay-text='使用中|已冻结'>";
                            }
                        }},
                    {title: '操作',align:'center',width:'20.2%',templet:function (d) {
                            return "<a href='javascript:viewPeople("+d.userId+");'>查看</a> <a href='javascript:jurisdiction(\""+d.userId+"\",\""+d.account+"\");'>权限</a> " +
                                "<a href='javascript:edit("+d.userId+");'>编辑</a> <a href='javascript:shutDown(\""+d.userId+"\",\""+d.account+"\");'>封停</a>";
                        }}
                ]]
            });
        }

    </script>
</html>